<script setup>
  import { ref, computed } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { toast } from '@/utils/utils'
  import { taskDelay } from '@/apis/task.js'
  //这样会报错dgg说的
  // import {dateFormat} from 'licia'
  import dateFormat from 'licia/dateFormat'

  const id = ref()
  const planDepartureTime = ref()
  //生成一个长度为60的数组，把索引转换为字符串，并补0
  const minutes = Array.from({ length: 60 }, (_, i) => i + '分钟')
  const hours = ref([['0', '1', '2'].map((v) => v + '小时'), minutes]) //选择时间，一个数组为一列
  const delayReason = ref('') //延迟提货原因
  const delayTime = ref('') //延时时间

  //选择时间value发生改变时触发
  function onChange(event) {
    // console.log('Selected Time:', event.detail.value)
    const [hours, minutes] = event.detail.value
    if (event.detail.value.join(',') === '0,0') {
      delayTime.value = ''
      return toast('您选择的时间没有延迟')
    }
    //需要延时的时间转换为毫秒
    const milliseconds = hours * 60 * 60 * 1000 + minutes * 60 * 1000
    //显示的延时时间=原计划时间+需要延时的时间
    const timestamp = new Date(planDepartureTime.value).getTime() + milliseconds
    delayTime.value = dateFormat(new Date(timestamp), 'yyyy-mm-dd HH:MM:ss')
    // console.log(delayTime.value)
  }

  //选择时间时某一列值发生改变时触发
  const oncolumnchange = (e) => {
    // console.log(e, 'e')
    if (e.detail.column === 0) {
      if (e.detail.value === 2) {
        hours.value[1] = ['0分钟']
      } else {
        hours.value[1] = minutes
      }
    }
  }

  //使用计算属性来控制提交按钮
  const disabledSubmitBtn = computed(() => {
    return delayTime.value === '' || delayReason.value.length === 0 || delayReason.value.length > 50
  })

  const submit = async () => {
    const formData = {
      id: id.value,
      delayTime: delayTime.value.slice(0, -3),
      delayReason: delayReason.value,
    }
    await taskDelay(formData)
    toast('延迟成功，请按时提货！', undefined, true)
    setTimeout(() => {
      uni.switchTab({
        url: '/pages/task/index',
      })
    }, 1500)
  }

  onLoad((query) => {
    id.value = query.id
    planDepartureTime.value = query.planDepartureTime
  })
</script>

<template>
  <view class="page-container">
    <uni-list :border="false">
      <uni-list-item title="原定时间 " showArrow :rightText="planDepartureTime" />
      <uni-list-item title="延迟时间" showArrow>
        <template v-slot:footer>
          <picker
            class="time-picker"
            mode="multiSelector"
            :range="hours"
            @change="onChange"
            @columnchange="oncolumnchange"
          >
            <text v-if="delayTime">{{ delayTime }}</text>
            <text v-else class="error">不可超过2个小时</text>
          </picker>
        </template>
      </uni-list-item>
      <uni-list-item direction="column">
        <template v-slot:body>
          <view class="textarea-wrapper">
            <textarea
              v-model="delayReason"
              class="textarea"
              placeholder-style="color: #818181"
              :class="{ error: delayReason.length > 50 }"
              placeholder="请输入延迟提货原因"
            ></textarea>
            <text class="words-count">{{ delayReason.length }}/50</text>
          </view>
        </template>
      </uni-list-item>
      <uni-list-item :border="false">
        <template v-slot:body>
          <button :disabled="disabledSubmitBtn" class="button" @click="submit">提交</button>
        </template>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<style lang="scss" scoped>
  @import './index.scss';
</style>
